<template>
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>公文列表</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="handleCreate">新建公文</el-button>
        </div>
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="加载中..."
          border
          fit
          highlight-current-row
        >
          <el-table-column align="center" label="ID" width="80">
            <template slot-scope="scope">
              {{ scope.row.id }}
            </template>
          </el-table-column>
          <el-table-column width="180px" align="center" label="日期">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>
          <el-table-column width="120px" align="center" label="作者">
            <template slot-scope="scope">
              {{ scope.row.author }}
            </template>
          </el-table-column>
          <el-table-column width="100px" label="标题">
            <template slot-scope="scope">
              {{ scope.row.title }}
            </template>
          </el-table-column>
          <el-table-column class-name="status-col" label="状态" width="110">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleView(scope.row)"
              >
                查看
              </el-button>
              <el-button
                v-if="scope.row.status==='草稿'"
                size="mini"
                type="primary"
                @click="handleEdit(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                v-if="scope.row.status==='草稿'"
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listQuery.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
  // import { fetchList, deleteDocument } from '@/api/document'
  
  export default {
    name: 'DocumentList',
    filters: {
      statusFilter(status) {
        const statusMap = {
          '草稿': 'info',
          '审批中': 'warning',
          '已通过': 'success',
          '已拒绝': 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        list: [
          {
            id: 1,
            title: '关于公司年度计划的通知',
            author: '张三',
            createTime: '2023-01-01 10:00:00',
            status: '草稿'
          },
          {
            id: 2,
            title: '关于部门调整的通知',
            author: '李四',
            createTime: '2023-01-02 11:00:00',
            status: '审批中'
          },
          {
            id: 3,
            title: '关于员工福利调整的通知',
            author: '王五',
            createTime: '2023-01-03 12:00:00',
            status: '已通过'
          },
          {
            id: 4,
            title: '关于年终奖发放的通知',
            author: '赵六',
            createTime: '2023-01-04 13:00:00',
            status: '已拒绝'
          }
        ],
        total: 4,
        listLoading: false,
        listQuery: {
          page: 1,
          limit: 10
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        // 模拟API调用
        setTimeout(() => {
          this.listLoading = false
        }, 1000)
        
        // 实际项目中应该调用API
        // fetchList(this.listQuery).then(response => {
        //   this.list = response.data.items
        //   this.total = response.data.total
        //   this.listLoading = false
        // })
      },
      handleSizeChange(val) {
        this.listQuery.limit = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      },
      handleCreate() {
        this.$router.push('/document/create')
      },
      handleEdit(row) {
        this.$router.push(`/document/edit/${row.id}`)
      },
      handleView(row) {
        this.$router.push(`/document/view/${row.id}`)
      },
      handleDelete(row) {
        this.$confirm('确认删除该公文?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 模拟删除操作
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 实际项目中应该调用API
          // deleteDocument(row.id).then(() => {
          //   this.$message({
          //     type: 'success',
          //     message: '删除成功!'
          //   })
          //   this.getList()
          // })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    }
  }
  </script>
  
  <style scoped>
  .pagination-container {
    margin-top: 30px;
  }
  </style>